<template>
  <div class="real-time-data">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="position" label="位号" width="120"></el-table-column>
      <el-table-column prop="value" label="值" >
        <template #default="{ row }">
          <el-input v-model="row.value" type="number"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="button-container">
      <el-button type="primary" @click="clearData">清空</el-button>
      <el-button type="primary" @click="setData">设置</el-button>
    </div>
  </div>
</template>

<script lang="ts">
interface TableDataItem {
  position: string;
  value: number;
}

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance();


    const tableData = ref<TableDataItem[]>([
      {position: 'TC301-SV', name: "stepStemPuSet", value: 730},
      {position: 'TC302-SV', name: "stepStemPmSet", value: 730},
      {position: 'TC303-SV', name: "stepStemPdSet", value: 720},
      {position: 'FC301', name: "stepCarrierSet", value: 7},
      {position: 'FC302', name: "stepHydrogenSet", value: 0},
      {position: 'FC303', name: "stepCarbonsSet", value: 0},
    ])

    const clearData = () => {
      tableData.value.forEach(item => {
        item.value = 0;
      });
    }


    const setData = async () => {
      try {
        console.log("数据已成功发送到后台", tableData);

        let table = {
          stepStemPu: tableData.value[0].value,
          stepStemPm:  tableData.value[1].value,
          stepStemPd:  tableData.value[2].value,
          stepCarrier:  tableData.value[3].value,
          stepHydrogen:  tableData.value[4].value,
          stepCarbons:  tableData.value[5].value,
          stepWater: 0,
        }
        console.log("数据已成功发送到后台", table);
        await proxy.$api.PlcUrlc['write'](table);
        console.log('数据已成功发送到后台');
      } catch (error) {
        console.error('发送数据到后台失败:', error);
      }
    }

    return {
      tableData,
      clearData,
      setData
    }
  }
})
</script>

<style scoped>
.real-time-data {
  padding: 0px;
}

.button-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>